<template>
  <div class="course-container">
    <div class="nav">
      <span v-for="(item,index) in nav" :key="item" :class="{'chosen': type === index}"
            @click="gotoType(index)">{{ item }}</span>
    </div>
    <div class="list">
      <div class="course list-item" v-for="course in courses" :key="course.id">
        <div class="flex-box">
          <div class="cover img-box">
            <img :src="course.cover" alt="cover">
          </div>
          <div class="info flex-box">
            <div>
              <div class="title">{{course.name}}</div>
              <div class="teacher">
                <span>{{course.teacherName}}</span>
                <span>{{course.teacherTitle}}</span>
              </div>
            </div>
            <div class="status">
              <span>共{{course.sectionNum}}节 | 已学{{course.sectionLearnedNum}}节 学完{{course.sectionLearnedNum/course.sectionNum | percent}}</span>
            </div>
          </div>
        </div>
        <div @click="toStudy(course.id)" class="learn-btn">立即学习</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseView",
  data() {
    return {
      type: 0,
      nav: [ '未学完', '已学完','全部'],
      courses: []
    }
  },
  mounted() {
    this.type = 0
    this.getUserCourseList()
  },
  methods: {
    getUserCourseList(){
      this.$api
          .getUserCourseList({
            pageSize: 20,
            pageNow:1 ,
            status: 4,
            type: 0,
            process: this.type
          }).then(({data}) => {
        console.log("res",data)
        this.courses = data.data.rows;
        this.loading = false;
      });
    },
    toStudy(courseId){
      this.$router.push({
        name: "learn-notice",
        params: { courseId: courseId },
      });
    },
    gotoType(index) {
      this.type = index
      this.getUserCourseList()
    }
  },
  computed: {
    navList() {
      let nums = [this.all.length, this.unfinished.length, this.finished.length];
      return this.nav.map((item, index) => `${item}(${nums[index]})`);
    },
    showList() {
      console.log(this.type);
      switch (this.type) {
        case '全部':
          return this.all;
        case '未学完':
          return this.unfinished;
        case '已学完':
          return this.finished;
        default:
          return [];
      }
    }
  },
  watch: {
    '$route'(to) {
      this.handleQuery(to.query);
    }
  },
  filters: {
    percent(n) {
      return parseInt(n*100+'')+'%';
    }
  }
}
</script>

<style scoped lang="scss">
.nav {
  > span {
    margin-right: 20px;
    cursor: pointer;
    transition: .3s;
    &:hover, &.chosen {
      color: #357FF8;
      transition: .3s;
    }
  }
}

.course {
  position: relative;
  margin: 20px 0;
  .cover {
    width: 187px;
    height: 103px;
    margin-right: 10px;
  }
  .info {
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
  }
  .title {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .status {
    color: #888;
  }
  .learn-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background: #619DFF;

    line-height: 40px;
    color: white;
    text-align: center;
  }
}
</style>
